import { setTextToLink } from '../utils.js'

export const FormItemDesc = {
  template: `
    <el-card header="表单项配置" ref="container" class="el-card__header-no-border">
      <el-table :data="crudData" style="width: 100%">
        <el-table-column prop="name" label="参数" width="120" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="default" label="默认值" width="100" />
      </el-table>
    </el-card>
  `,

  data() {
    return {
      crudData: [
        {
          name: 'prop',
          description: 'el-form-item的prop属性',
          type: 'string',
        },
        {
          name: 'label',
          description: 'el-form-item的label属性',
          type: 'label',
        },
        {
          name: 'options',
          description: '绑定给el-form-item的属性',
          type: 'object',
        },
        {
          name: 'dicts',
          description: '字典',
          type: 'Array<{ label: string, value: any, color?: string }>'
        },
        {
          name: 'show',
          description: '控制显示隐藏，例如：{ show: data => data.isShow }，data为当前表单参数',
          type: 'Array<{ label: string, value: any, color?: string }>'
        },
        {
          name: 'rule',
          description: 'el-form-item的rules属性',
          type: 'object | array'
        },
        {
          name: 'required',
          description: `{ rules: { required: true } }的简写`,
          type: 'boolean'
        },
        {
          name: 'width',
          description: `表单项宽度`,
          type: 'number | string'
        },
        {
          name: 'render',
          description: `自定义表单项，同searchBarConfig.items的render配置，但是函数的第二个参数多一个model，为当前表单参数`,
          type: 'function'
        },
        {
          name: 'transform',
          description: `转化调用input方法传入的值`,
          type: 'function',
        },
        {
          name: 'defaultValue',
          description: `默认值`,
          type: 'function',
        },
        {
          name: 'component',
          description: `同searchBarConfig.items的component配置`,
          type: 'string',
        }
      ],
    }
  },

  mounted() {
    this.$nextTick(() => {
      setTextToLink(this.$el, 'cell', 'searchBarConfig.items的render', './crud.html#SearchBarConfigDesc')
      setTextToLink(this.$el, 'cell', 'searchBarConfig.items的component', './crud.html#SearchBarConfigDesc')
    })
  }
}